<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>客户转化</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <div style="border-bottom: 1px solid #d7d7d7; padding: 10px 0; margin-bottom: 15px">
                <el-select v-model="tab" filterable placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                选择阶段流程
                <el-checkbox v-model="checked">默认阶段</el-checkbox>
            </div>

            <el-form :inline="true" :model="queryData" class="user-search">
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="queryData.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="客户来源">
                    <el-select v-model="queryData.source" filterable placeholder="请选择">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
        </el-card>

        <div v-show="tab=='1'">
            <el-card>
                <div class="smallFont">各级端客户分析</div>
                <div style="height: 600px;" ref="payEchart"></div>
            </el-card>
        </div>

        <el-card v-show="tab=='2'">
            <div>
                在
                <el-date-picker
                    v-model="listTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                将客户的阶段变更为：

                <div style="display:flex;">
                    <div class="ge" style="flex: 3" v-for="(item, index) in clientStatus" :key="index">
                        <div class="smallFont">{{item.label}}</div>
                        <div class="bigFont">{{item.custNum}}</div>
                    </div>
                </div>

                <!--列表-->
                <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
                          element-loading-text="拼命加载中" style="width: 100%;">
                    <el-table-column prop="clientName" label="客户姓名" width="150" fixed>
                    </el-table-column>
                    <el-table-column prop="clientStatusName" label="客户阶段" width="150">
                    </el-table-column>
                    <el-table-column prop="groupTag" label="客户标签" width="350">
                        <template slot-scope="scope">
                            <el-tag :key="index" v-for="(tag, index) in scope.row.tagList"
                                    style="margin: 0 10px 10px 0">
                                {{ tag.clientTagsName }}
                            </el-tag>
                            <div v-if="scope.row.tagList == null || scope.row.tagList.length == 0">
                                --
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="empName" label="负责员工" width="150">
                    </el-table-column>
                    <el-table-column prop="clientSex" label="客户性别" width="150">
                    </el-table-column>
                    <el-table-column prop="clientBirthday" label="客户生日" width="150">
                    </el-table-column>
                    <el-table-column prop="clientPhone" label="联系电话" width="150">
                    </el-table-column>
                    <el-table-column prop="clientDescription" label="客户描述" width="150">
                    </el-table-column>
                    <!--                    <el-table-column prop="PeopleNum" label="内容标签" width="150">-->
                    <!--                    </el-table-column>-->
                    <!--                    <el-table-column sortable prop="joinTime" label="创建时间" width="150">-->
                    <!--                    </el-table-column>-->
                    <!--                    <el-table-column sortable prop="updateTime" label="上次跟进" width="150">-->
                    <!--                    </el-table-column>-->
                    <el-table-column prop="clientInstent" label="客户意向" width="150">
                    </el-table-column>
                    <el-table-column prop="clientSource" label="客户来源" width="150">
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div style="display: flex; justify-content: flex-end;">
                    <div style="width: 450px; height: 60px;">
                        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
                    </div>
                </div>
            </div>
        </el-card>

        <!--        <el-card v-show="tab=='2'">-->
        <!--            <transformList></transformList>-->
        <!--        </el-card>-->
    </div>
</template>

<script>
    // 列表页
    import transformList from '@/views/security/transform/list'
    import Chart from "echarts";
    import Pagination from '@/components/Pagination'

    export default {
        data() {
            return {
                // 搜索框
                queryData: {
                    time: '',
                    name: ''
                },
                // 切换页面下拉选项
                options: [
                    {
                        value: '1',
                        label: '客户转化视图'
                    },
                    {
                        value: '2',
                        label: '阶段变更透视'
                    }
                ],
                // 来源下拉选项
                options1: [
                    {
                        value: '1',
                        label: '销售部'
                    }, {
                        value: '2',
                        label: '技术部'
                    }, {
                        value: '3',
                        label: '教研部'
                    }
                ],
                // 切换页面
                tab: '1',
                // 默认选中
                checked: true,

                listTime: '',

                // 图表
                option: {
                    title: {
                        text: 'Referer of a Website',
                        subtext: 'Fake Data',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },
                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                // 是否加载
                loading: false,
                // 列表数据
                listData: [],
                clientStatus: [],
                customerData: [],
            }
        },

        mounted() {
            this.getStageData();
        },
        methods: {
            async getStageData() {
                let that = this

                let data = await this.$request("/api/clientStage/queryClientStageByParams/1_0", {}, "POST")
                let dataSource = data.rows

                for (let i = 0; i < dataSource.length; i++) {
                    let item = dataSource[i]
                    let payload = {
                        clientType: "1",
                        clientStatusId: item.clientStatusId
                    }
                    let clientData = await that.$request("/api/customers/getCustomersByParams/1_0", payload, "POST")
                    that.clientStatus.push({
                        label: item.clientStatusName,
                        value: item.clientStatusId,
                        custNum: clientData.rows.length
                    })
                }

                that.$request("/api/customers/getCustomersByParams/1_0", {clientType: "1"}, "POST").then((data) => {
                    for (let i = 0; i < data.rows.length; i++) {
                        if (data.rows[i].clientSex == '1') {
                            data.rows[i].clientSex = '男'
                        } else {
                            data.rows[i].clientSex = '女'
                        }
                        that.listData = data.rows
                    }
                }).then(()=>{
                    this.getpay();
                })
            },
            // 图表
            getpay() {
                let list = [
                    {
                        name: '',
                        value: 0
                    },
                    {
                        name: '',
                        value: 0
                    },
                    {
                        name: '',
                        value: 0
                    },
                    {
                        name: '',
                        value: 0
                    },
                ]
                this.clientStatus.map((item) => {
                    if ("35e89ddb85624d0fa1fd17528c273f29" == item.value) {
                        list[0].name = item.label
                        list[0].value++
                    }
                    if ("7316f947168d49c1943704bc483f1b01" == item.value) {
                        list[1].name = item.label
                        list[1].value++
                    }
                    if ("7850cf05fb0740638358f1e9e0e075d1" == item.value) {
                        list[2].name = item.label
                        list[2].value++
                    }
                    if ("cf94c6b4b5cb4f7eac30f67c9902a626" == item.value) {
                        list[3].name = item.label
                        list[3].value++
                    }
                })
                this.option.series[0].data = list

                this.chart = Chart.init(this.$refs.payEchart)
                this.chart.setOption(this.payoption)
            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.page = parm.currentPage
                this.formInline.limit = parm.pageSize
                this.getdata(this.queryData)
            },
        },
        // 注册组件
        components: {
            transformList,
            Pagination
        },
    }
</script>

<style scoped>
    .el-card {
        margin-top: 15px;
        width: 1640px;
    }

    /deep/ .el-card__body {
        padding: 10px 12px;
    }

    .smallFont {
        font-weight: 600;
        font-size: 14px;
    }

    .bigFont {
        font-weight: 700;
        font-size: 35px;
    }

    .ge {
        background: rgb(237, 242, 253);
        margin: 10px 5px 30px 5px;
        padding: 10px 15px;
        border-radius: 5px;
    }
</style>
